<script lang="ts" setup name="AtguiguInput">
    defineProps(['username', 'password']);
    const emit = defineEmits(['update:username', 'update:password']);
</script>

<template>
    <span>username: </span>
    <input type="text" :value="username"  @input="emit('update:username', (<HTMLInputElement>$event.target).value)"/>
    <br/>
    <span>password: </span>
    <input type="password" :value="password" @input="emit('update:password', (<HTMLInputElement>$event.target).value)"/>
</template>

<style scoped>
    input {
        border: 2px solid black;
        background-image: linear-gradient(45deg, red, yellow, green);
        height: 30px;
        font-size: 20px;
        color: white;
    }
</style>